<template>
  <el-upload
    :disabled="disabledUpload"
    class="upload"
    action=""
    :on-preview="handlePreview"
    :before-remove="beforeRemove"
    :on-remove="handleRemoveReport"
    :http-request="uploadSectionFileReport"
    :on-success="handleUploadSuccessReport"
    :on-exceed="handleExceedReport"
    multiple
    :limit="maxLimit"
    :file-list="fileList"
  >
    <el-button v-if="!disabledUpload" size="small">点击上传</el-button>

    <div slot="tip" class="el-upload__tip">
      附件：
      <!--      <el-tag-->
      <!--        v-if="!attachmentList || attachmentList.length === 0"-->
      <!--        type="info"-->
      <!--        style="margin-left: 20px"-->
      <!--      >-->
      <!--        没有文件-->
      <!--      </el-tag>-->
    </div>
  </el-upload>
</template>

<script>
  import uploadFile from '@/utils/ajax'
  import { getUploadUrl } from '@/api/fileApi'
  import ignoreErrorAttr from '../../utils/jsex'
  export default {
    name: 'UploadFile',
    props: {
      attachmentList: {
        type: Array,
        default: () => {
          return []
        },
      },
      disabledUpload: {
        type: Boolean,
        default: () => {
          return true
        },
      },
      maxLimit: { type: Number, default: () => 999 },
    },
    data: function () {
      let att = []
      if (this.attachmentList) {
        att = this.attachmentList
      }
      return {
        fileList: [],
        attachmentListData: Array.from(att),
      }
    },
    watch: {
      attachmentListData: {
        handler(val, oldVal) {
          this.$emit('update:attachmentList', val)
          // this.setAlist(val)
        },
        deep: true,
        immediate: true,
      },
      attachmentList: {
        handler(val, oldVal) {
          this.attachmentListData = val
          this.setAlist(this.attachmentListData)
        },
        deep: true,
        immediate: true,
      },
    },
    created() {
      this.setAlist(this.attachmentListData)
    },
    methods: {
      setAlist(v) {
        let list = []
        if (v !== undefined) {
          v.forEach((v) => {
            list.push({
              name: v.filename,
              url: v.url,
            })
          })
        }
        this.fileList = list
      },
      handlePreview(file) {
        let url = file.url
        if (file.url === undefined) {
          url = file.raw.downloadURL
        }
        window.open(url, '_blank')
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
            files.length + fileList.length
          } 个文件`
        )
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      },

      // -----------
      handleExceedReport(files, fileList) {
        this.$message.warning(
          `当前限制选择 ${this.maxLimit} 个文件，本次选择了 ${
            files.length
          } 个文件，共选择了 ${files.length + fileList.length} 个文件`
        )
      },

      handleRemoveReport(file, fileList) {
        let list = Array.from(this.attachmentListData)
        list.forEach((value, index, array) => {
          let url = ignoreErrorAttr(file, 'raw.attachment.url')
          if (value.url === file.url || value.url === url) {
            this.attachmentListData.splice(index, 1)
          }
        })
      },

      handleUploadSuccessReport(res, file) {
        const attachment = file.raw.attachment
        if (attachment === undefined) {
          Message({
            message: '上传失败：' + res.message,
            type: 'fail',
            duration: 1 * 1000,
          })
          return
        }

        if (this.attachmentListData === undefined) {
          this.attachmentListData = []
        }
        this.attachmentListData.push(attachment)
      },
      uploadSectionFileReport(param) {
        getUploadUrl(param.file.name).then((resp) => {
          param.action = resp.data['putURL']
          param.file.downloadURL = resp.data['getURL']
          param.file.attachment = resp.data['attachment']
          uploadFile(param)
        })
      },
    },
  }
</script>
